import 'package:fish_redux/fish_redux.dart';
import 'package:flutter/material.dart' hide Action;
import 'package:webview_flutter/webview_flutter.dart';
import 'package:www.znpigai.teacher/global_store/state.dart';

import 'action.dart';
import 'state.dart';

Widget buildView(WebState state, Dispatch dispatch, ViewService viewService) {
  WebViewController _controller;

  void _onFinish() async {
    if (_controller != null) {
      var title = await _controller.evaluateJavascript('document.title');
      dispatch(WebActionCreator.onTitle(title));
    }
  }

  Widget bottomBar() {
    var buttons = <Widget>[];
    if (state.done.isNotEmpty) {
      buttons.add(
        SizedBox(
          // 去编辑，交作业
          width: 80,
          child: FlatButton(
            padding: EdgeInsets.all(8),
            color: Colors.blue,
            textColor: Colors.white,
            child: Text(state.done),
            shape: RoundedRectangleBorder(
                side: BorderSide(
                  color: Colors.white,
                  width: 0,
                ),
                borderRadius: BorderRadius.circular(20)),
            onPressed: () {
              dispatch(WebActionCreator.onDone());
            },
          ),
        ),
      );
    }
    buttons.add(
      SizedBox(
        width: 80,
        child: FlatButton(
          padding: EdgeInsets.all(8),
          color: Colors.blue,
          textColor: Colors.white,
          child: Text('去得瑟'),
          shape: RoundedRectangleBorder(
              side: BorderSide(
                color: Colors.white,
                width: 0,
              ),
              borderRadius: BorderRadius.circular(20)),
          onPressed: () {
            dispatch(WebActionCreator.onShare());
          },
        ),
      ),
    );

    return Container(
      padding: EdgeInsets.all(10),
      color: Colors.black12,
      child: Row(
        mainAxisSize: MainAxisSize.max,
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: buttons,
      ),
    );
  }

  var bottomHeight = state.share || state.done.isNotEmpty ? 80.0 : 0.0;

  return Scaffold(
      appBar: AppBar(
        title: Text(state.title ?? ''),
        centerTitle: true,
        actions: <Widget>[
          IconButton(
            icon: new Icon(Icons.close),
            tooltip: 'Closes application',
            onPressed: () => Navigator.pop(viewService.context),
          ),
        ],
      ),
      body: Stack(
        children: <Widget>[
          Positioned(
            top: 0,
            left: 0,
            right: 0,
            bottom: bottomHeight,
            child: Builder(builder: (BuildContext context) {
              return WebView(
                initialUrl: state.url,
                javascriptMode: JavascriptMode.unrestricted,
                onWebViewCreated: (WebViewController webViewController) {
                  _controller = webViewController;
                  _controller.loadUrl(state.url,
                      headers: {'ticket': GlobalState.ticket});
                },
                // TODO(iskakaushik): Remove this when collection literals makes it to stable.
                // ignore: prefer_collection_literals
                javascriptChannels: <JavascriptChannel>[
                  // _toasterJavascriptChannel(context),
                ].toSet(),
                navigationDelegate: (NavigationRequest request) {
                  if (request.url.startsWith('https://www.youtube.com/')) {
                    print('blocking navigation to $request}');
                    return NavigationDecision.prevent;
                  }
                  print('allowing navigation to $request');
                  return NavigationDecision.navigate;
                },
                onPageFinished: (String url) {
                  print('Page finished loading: $url');
                  _onFinish();
                },
              );
            }),
          ),
          Positioned(
              top: 0,
              left: 0,
              right: 0,
              child: Offstage(
                offstage: state.progress == 100,
                child: SizedBox(
                  height: 2.0,
                  child: LinearProgressIndicator(
//                value: 80,
//                backgroundColor: Colors.green,
                      ),
                ),
              )),
          Positioned(
            bottom: 0,
            left: 0,
            right: 0,
            height: bottomHeight,
            child: bottomBar(),
          ),
        ],
      ));
}
